<template>
    <div class="main">
        <canvas ref="bg" class="bg"></canvas>


        <v-card class="loginForm">
            <v-card-text>
                <v-form v-model="loginValid" ref="loginForm">
                    <div class="my-10 text-center text-h5">
                        Welcome to XYNS-Blog
                    </div>
                    <v-text-field :rules="[rules.required]" v-model="loginForm.username" label="username"
                        outlined></v-text-field>
                    <v-text-field type="password" :rules="[rules.required]" v-model="loginForm.password" label="password"
                        outlined></v-text-field>
                    <v-row class="text-center">
                        <v-col :cols="6">
                            <v-btn color="success" @click="doLogin">Login</v-btn>
                        </v-col>
                        <v-col :cols="6">
                            <v-btn color="info" @click="doReset">Reset</v-btn>
                        </v-col>
                    </v-row>
                </v-form>
            </v-card-text>
        </v-card>


        <v-snackbar v-model="snackbar">
            {{ text }}
            <template v-slot:action="{ attrs }">
                <v-btn color="pink" text v-bind="attrs" @click="snackbar = false">
                    Close
                </v-btn>
            </template>
        </v-snackbar>


    </div>
</template>
<script>
import md5 from 'md5';
import lodash from "lodash";
import { doLogin } from "@/api/back/user";
import { getRandomColor, getRandomChar } from "@/api/helpFunc";


export default {
    name: "LoginView",
    data() {
        return {
            text: "",
            snackbar: false,
            loginValid: false,
            loginForm: {
                username: "",
                password: ""
            },
            rules: {
                required: value => !!value || 'Required.',
            }
        }
    },
    beforeCreate() {
        window.localStorage.clear();
        console.log("first in")
    },
    mounted() {
        let cvs = this.$refs.bg;
        let width = window.innerWidth,
            height = window.innerHeight;
        cvs.width = width;
        cvs.height = height;
        let ctx = cvs.getContext("2d");
        let columnWidth = 20;
        let columnCount = Math.floor(window.innerWidth / columnWidth);
        let columnNextIndexes = new Array(columnCount);
        columnNextIndexes.fill(1);
        let draw = () => {
            ctx.fillStyle = 'rgba(240,240,240,0.1)';
            ctx.fillRect(0, 0, width, height);
            let fz = 20;
            ctx.fillStyle = getRandomColor();
            ctx.font = `${fz}px "Roboto Mono"`;
            for (let i = 0; i < columnCount; i++) {
                let x = i * columnWidth;
                let y = fz * columnNextIndexes[i];
                ctx.fillText(getRandomChar(), x, y);
                if (y > height && Math.random() > 0.99) {
                    columnNextIndexes[i] = 0;
                } else {
                    columnNextIndexes[i]++;
                }
            }
        }
        setInterval(() => {
            draw();
        }, 40);
    },
    methods: {
        async doLogin() {
            let bool = this.$refs.loginForm.validate();
            if (bool) {
                let sdata = lodash.cloneDeep(this.loginForm);
                sdata.password = md5(sdata.password);
                let res = await doLogin(sdata);
                if (res.code == 200) {
                    let token = res.data.token;
                    window.localStorage.setItem("token", token);
                }
                this.text = res.msg;
                this.snackbar = true;
            }
        },
        doReset() {
            this.loginForm = {
                username: "",
                password: ""
            }
        }
    }
}
</script>
<style scoped lang="scss">
.main {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

    .bg {
        position: absolute;
        top: 0;
    }

    .loginForm {
        margin: 0 auto;
        width: 30vw;
        height: 60vh;
        position: relative;
        top: 15vh;
    }
}
</style>